<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="添加广告组" :visible.sync="dialogVisible" @close="resetForm()" width="600px">
        <el-input placeholder="请输入广告主ID、广告主名称进行搜索" clearable prefix-icon="el-icon-search" @change="getDataList(planData)" v-model="queryInfo.query">
        </el-input>
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" class="com_table" height="400px" :row-key="(row)=>{ return row.id}" style="margin-top:20px" ref="planRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="selectable">
                </el-table-column>
                <el-table-column prop="id" label="广告组 ID" width="180">
                </el-table-column>
                <el-table-column prop="name" label="广告组">
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="margin-top:20px" background layout="prev, pager, next" @current-change="handleCurrentChange" :total="tableData.length">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :disabled='disabled' :loading='disabled' class="el-button-width">添 加</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            disabled:false,
            pagesize:10,
            currentPage:1,
            hasCheck: [],
            queryInfo: {
                query: "",
                page: 1,
                limit: 0,
            },
            tableData: [],
            total: 0,
        };
    },
    created() {
        this.$bus.on("addVideoGroup", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.planData = value.planData;
            this.type = value.type
            this.getDataList(value.planData, 1);
        });
    },
    beforeDestroy() {
        this.$bus.off("addPlanGroup");
    },
    methods: {
        //获取广告组
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true
            const { data: res } = await this.$http.post(
                "videotest/videotesting/campaignList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.currentPage = 1
                this.hasSelect = res.data.selected
                for(let i in res.data.list){
                    for(let a in res.data.selected){
                        if(res.data.list[i].id==res.data.selected[a]){
                           res.data.list[i].status = true
                        }
                    }
                }
                this.tableData = res.data.list;
            }
        },

        selectable(row,index){
            if(row.status){
                return false
            }else{
                return true
            }
        },

        // 添加
        async submitForm() {
            if(this.hasCheck.length<=0){
                this.$message.error('请选择广告组');
                return;
            }else{
                this.disabled = true
                let campaign_id = this.hasCheck.map(val=>{return val.id})
                const { data: res } = await this.$http.post(
                    "videotest/videotesting/videoTestingAdd",
                    {
                        campaign_id:campaign_id
                    }
                );
                if (res.code !== 200) {
                    this.disabled = false
                    this.$message.error(res.msg);
                    return;
                } else {
                    this.disabled = false
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.$parent.getDataList(1);
                    this.resetForm()
                }
            }
               
        },

        // 关闭重置表单
        resetForm() {
            this.hasCheck = [];
            this.tableData = [];
            this.queryInfo.query = ""
            this.currentPage = 1
            if(this.type==1){
                this.$refs.planRef.clearSelection();
            }
            this.dialogVisible = false;
        },

        // 表格选中
        handleSelectionChange(v) {
            this.hasCheck = v
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(this.planData, 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.currentPage = val;
            // this.setpage = val;
            // this.getDataList(this.planData, val);
        },
    },
    components: {},
};
</script>


<style scoped>
</style>
